<template>
  <div class="data-analysis">
    <!-- 数据总览 -->
    <p class="my-data-detail-title">
      数据总览
      <el-tooltip placement="right" effect="light">
        <template #content>
          <div v-html="dataViewTips"></div>
        </template>
        <i class="jy-icon-help"></i>
      </el-tooltip>
    </p>
    <NavPrev :navPrev="detailNavPrev"></NavPrev>

    <!-- 按钮触发次数 -->
    <div class="my-data-detail-title" v-if="isShowBtnClickData">
      按钮触发次数
      <el-tooltip placement="right" effect="light">
        <template #content>
          <div v-html="btnTips"></div>
        </template>
        <i class="jy-icon-help"></i>
      </el-tooltip>
      <div class="btn-export-con">
        <span>{{curSiteData.time}}</span>
        <el-button round type="primary">导出Excel</el-button>
      </div>
    </div>

    <!-- 可视化展示组件点击数 -->
    <div v-if="bIsClickStaticsShow" class="my-data-detail-title">
      可视化展示组件点击数
    </div>
    <ComponentClickStatics v-if="bIsClickStaticsShow" :isClickStatics="true" :site_id="site_id"></ComponentClickStatics>
  </div>
</template>

<script>
  import NavPrev from '@/views/child/admin/adminData/NavPrev.vue';
  import ComponentClickStatics from '@/views/child/admin/common/ComponentClickStatics.vue';
  import { H5_TYPE } from '@/common/const-dif';

  import { mapState, mapActions } from 'vuex'
  import { ref } from 'vue'

  export default {
    setup () {
      return {
        // tips
        dataViewTips: '<p>· 浏览量（pv）指作品被打开浏览的次数<br />\
          · 访客数（uv）指有多少人浏览了该作品<br />\
          · 分享数指作品在微信中被分享到朋友圈和转发到会话的次数<br />\
          · 平均停留时间指作品每次浏览的时间总和／总的浏览次数<br />\
          · 由于访问统计受访客的网络原因影响，统计数据可能会出现微小偏差</p>',
        btnTips: '记录按钮点击数',
        // 按钮触发次数
        isShowBtnClickData: ref(false),
      }
    },
    props: ['site_id'],
    computed: {
      ...mapState({
        detailNavPrev: state => state.user.detailNavPrev,
        curSiteData: state => state.user.mySite4Data,
      }),
      bIsClickStaticsShow() {
        return this.curSiteData.h5Type != H5_TYPE.card;
      },
    },
    components: {
      NavPrev,
      ComponentClickStatics,
    },
    beforeMount() {
      // 获取 数据预览
      this.getNavPrev({
        site_id: this.site_id,
      });
    },
    methods: {
      ...mapActions({
        getNavPrev: 'user/getNavPrev',
      }),
    },
  }
</script>

<style lang="scss" scoped>
</style>
